<template>
    <dv-border-box-12 class="LinechartBox">
      <div class="d-flex pt-2 pl-2">
        <div class="d-flex">
          <span><i class="iconfont icon-chart-area" /></span>
          <span class="mx-2">{{ title }}</span>
        </div>
      </div>
      <!-- 使用动态生成的唯一 id -->
      <div class="d-flex jc-center chart-container">
        <div :id="chartId" class="chart"></div>
      </div>
    </dv-border-box-12>
  </template>
  
  <script lang="ts">
  import { defineComponent, onMounted, ref, watch } from "vue";
  // 引入 ECharts 库
  import * as echarts from 'echarts';
  
  export default defineComponent({
    props: {
      title: {
        type: String,
        default: "",
      },
      PieIndex: {
        type: Number,
        default: 0
      }
    },
    setup(props) {
      // 生成唯一的 chartId
      const chartId = ref(`line-chart-${Math.random().toString(36).substr(2, 9)}`);
      // 定义 legendData 变量来存储 legend 的数据
      const legendData = ref(['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']);
      // 定义 seriesData 变量来存储 series 的数据
      const seriesData = ref([
        {
          name: '邮件营销',
          type: 'bar', // 修改为柱状图
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210],
          barWidth: 20 // 设置柱状图宽度
        },
        {
          name: '联盟广告',
          type: 'bar', // 修改为柱状图
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310],
          barWidth: 20 // 设置柱状图宽度
        },
        {
          name: '视频广告',
          type: 'bar', // 修改为柱状图
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410],
          barWidth: 20 // 设置柱状图宽度
        },
        {
          name: '直接访问',
          type: 'bar', // 修改为柱状图
          stack: '总量',
          data: [320, 332, 301, 334, 390, 330, 320],
          barWidth: 20 // 设置柱状图宽度
        },
        {
          name: '搜索引擎',
          type: 'bar', // 修改为柱状图
          stack: '总量',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          barWidth: 20 // 设置柱状图宽度
        }
      ]);
  
      // 定义一个方法来更新 legendData 和 seriesData
      const updateLegendData = () => {
        switch (props.PieIndex) {
          case 1:
          case 2:
          case 3:
          case 4:
          case 5:
          case 6:
          case 7:
          case 8:
          case 9:
          case 10:
          case 11:
          case 12:
          case 13:
          case 14:
          case 15:
          case 16:
          case 17:
          case 18:
          case 19:
          case 20:
          case 21:
          case 22:
          case 23:
          case 24:
            legendData.value = ['平均工作量', '同期'];
            seriesData.value = [
              {
                name: '平均工作量',
                type: 'bar',
                stack: '总量',
                data: [10, 20, 30, 40],
                barWidth: 20
              },
              {
                name: '同期',
                type: 'bar',
                stack: '总量',
                data: [5, 20, 25, 30],
                barWidth: 20
              }
            ];
            break;
          default:
            legendData.value = [];
            seriesData.value = [];
            break;
        }
      };
  
      const initChart = () => {
        // 更新 legendData 和 seriesData
        updateLegendData();
        const chartDom = document.getElementById(chartId.value);
        if (chartDom) {
          const myChart = echarts.init(chartDom);
  
          const option = {
            // 设置全局文本颜色为白色
            textStyle: {
              color: '#fff',
              fontSize: 15
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
              textStyle: {
                color: '#fff'
              }
            },
            legend: {
              // 使用 legendData 变量的值
              data: legendData.value,
              textStyle: {
                color: '#fff'
              },
              top: 'bottom', // 将图例放置在底部
              itemHeight: 10, // 缩小图例项的高度
              itemWidth: 10 // 缩小图例项的宽度
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '10%', // 增加底部间距，避免图例遮挡
              top: '5%', // 减少顶部间距
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: ['2024.Q1', '2024.Q2', '2024.Q3', '2024.Q4'],
              axisLabel: {
                color: '#fff',
                fontSize: 15,
                interval:0
              }
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                color: '#fff'
              }
            },
            // 使用 seriesData 变量的值
            series: seriesData.value
          };
  
          myChart.setOption(option);
        }
      };
  
      onMounted(() => {
        initChart();
      });
  
      // 监听 props.PieIndex 的变化
      watch(() => props.PieIndex, () => {
        initChart();
      });
  
      return {
        chartId,
        updateLegendData
      };
    }
  });
  </script>
  
  <style scoped>
  .LinechartBox {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
  }
  
  .chart-container {
    padding-top: 20px;
    /* 距离顶部 20px */
    display: flex;
    justify-content: center;
    /* 水平居中 */
  }
  
  .chart {
    width: 97%;
    height:180px;
  }
  </style>